<script setup>
import { ref, onMounted, watch } from "vue";

const prop = defineProps({
  doc: Object,
  readOnly: Boolean,
});
const jsonDoc = ref("");
var wrapper = ref(null);
// var jsonEditorObj = null;

onMounted(() => {

  watch(
    prop.doc,
    (to) => {
      setValue(to);
    },
    {
      immediate: true,
    }
  );
});

function setValue(to) {
  jsonDoc.value = JSON.stringify(to, null, 4)
  console.log("set value",to,jsonDoc.value)
}

defineExpose(setValue);
</script>

<template>
  <div ref="wrapper" class="jsonEditorWrapper">
    <pre><code>{{ jsonDoc }}</code></pre>
  </div>
</template>

<style lang="scss" scoped>
.jsonEditorWrapper {
  flex: 1;
  height: 100%;

  pre {
    background-color: #414141;
    color: white;
    margin: 20px;
    border-radius: 6px; 
    padding: 10px;
    font-family: 'Courier New', Courier, monospace;
  }

  code {
    font-size: 0.9em;
    text-indent: 0;

    ::first-line {
      padding-left: 0;
    }
  }
}
</style>